<template>
  <div class="reportTime">
    <el-row :gutter="12">
      <el-col :span="2">
        {{$t('report.time')}}
      </el-col>
      <el-col :span="4"  style="width: 130px">
        <el-select size="mini" v-model.trim="form.timeType" @change="typeChange" :id="'report_date' + Math.random()">
          <el-option
            v-for="item in reportType"
            :label="item.label"
            :value="item.value"
            :name="item.name"
            :key="item.value">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="4" style="width: 166px">
        <el-date-picker
          v-model="formSource.yearReport"
          align="right"
          v-show="form.timeType === 'year'"
          type="year"
          :id="'report_date' + Math.random()"
          @change = changeDate
          size="mini"
          :picker-options="pickerOptions"
          :clearable="false"
          placeholder="选择年">
        </el-date-picker>
      </el-col>
      <el-col :span="4" style="width: 166px">
        <el-date-picker
          v-model="formSource.monthReport"
          type="month"
          :id="'report_date' + Math.random()"
          @change = changeDate
          v-show="form.timeType === 'month'"
          size="mini"
          :clearable="false"
          :picker-options="pickerOptions"
          placeholder="选择月">
        </el-date-picker>
      </el-col>
      <el-col :span="4" v-show="this.form.timeType === 'week'" style="width: 166px">
        <el-date-picker
          size = "mini"
          v-model="week"
          @change="changeWeek"
          type="week"
          :id="'date' + Math.random()"
          :format="$t('report.weekTip')"
          :clearable="false"
          :picker-options="pickerOptions"
          placeholder="选择周"></el-date-picker>
      </el-col>
      <el-col :span="4" v-show="this.form.timeType === 'day'" style="width: 166px">
        <el-date-picker
          v-model="formSource.dayReport"
          type="date"
          size="mini"
          :clearable="false"
          :id="'report_date' + Math.random()"
          @change = changeDate
          :picker-options="pickerOptions1"
          placeholder="选择日期">
        </el-date-picker>
      </el-col>
      <div class="" v-show="this.form.timeType === this.type">
        <el-col :span="4" style="width: 144px">
          <el-date-picker
            :id="'report_date' + Math.random()"
            class="date"
            v-model.trim="otherTimes.beginDate"
            type="date"
            size="mini"
            :editable="boolean"
            :picker-options="pickerOptions1"
            :placeholder="$t('report.startDate')">
          </el-date-picker>
        </el-col>
        <el-col :span="3" style="width: 130px">
          <el-time-select
            :id="'report_date' + Math.random()"
            class="time"
            size="mini"
            :disabled="timeCheck"
            v-show="openTime"
            v-model.trim="otherTimes.beginTime"
            :picker-options="optionsCurrent"
            :editable="boolean"
            :placeholder="$t('report.startTime')">
          </el-time-select>
        </el-col>
        <el-col :span="4" style="width: 144px">
          <el-date-picker
            :id="'report_date' + Math.random()"
            class="date"
            size="mini"
            v-model.trim="otherTimes.endDate"
            type="date"
            :editable="boolean"
            :picker-options="pickerOptions1"
            :placeholder="$t('report.endDate')">
          </el-date-picker>
        </el-col>
        <el-col :span="3" style="width: 130px">
          <el-time-select
            :id="'report_date' + Math.random()"
            class="time"
            :disabled="timeCheck"
            size="mini"
            v-show="openTime"
            :editable="boolean"
            v-model.trim="otherTimes.endTime"
            :picker-options="optionsCurrent"
            :placeholder="$t('report.endTime')">
          </el-time-select>
        </el-col>
      </div>
      <el-col :span="4" class="isShowFold" v-show="isShowCon" style="overflow: hidden;text-overflow: ellipsis; white-space: nowrap">
        <span @click="spreadClickFun" v-show="isShowFlag" class="ui-unfold-span">{{title[0]}} <i class="el-icon-arrow-up"></i></span>
        <span @click="retractClickFun" v-show="!isShowFlag" class="ui-unfold-span">{{title[1]}} <i class="el-icon-arrow-down"></i></span>
      </el-col>
    </el-row>
    <div class="time_pic" v-show="isShowFlag">
      <div style="margin-top:14px;" v-show="isTimePeriod">
        <el-checkbox v-model="timeCheck" @change="timePeriodChange">{{$t('report.timePeriod')}}</el-checkbox>
        <questionToolTip :tipContent="$t('report.timePeriodTip')"></questionToolTip>
        <el-time-select
          :id="'report_date' + Math.random()"
          size="mini"
          class="time"
          :disabled="!timeCheck"
          v-model.trim="timePeriodStart"
          :picker-options="{
            start: '00:00',
            step: '00:30',
            end: '23:30',
            maxTime: timePeriodEnd
          }"
          :placeholder="$t('report.startTime')">
        </el-time-select>
        <el-time-select
          :id="'report_date' + Math.random()"
          style="margin-left:12px;"
          size="mini"
          class="time"
          :disabled="!timeCheck"
          v-model.trim="timePeriodEnd"
          :picker-options="{
            start: '00:00',
            step: '00:30',
            end: '24:00',
            minTime: timePeriodStart
          }"
          :placeholder="$t('report.endTime')">
        </el-time-select>
      </div>
    </div>
  </div>
</template>
<script>
  import {formatDateQuery} from '@/utils/reportUtils.js'
  import {getDateTime} from '@/utils/m7Utils.js'
  import questionToolTip from '../../../ui-modules/questionToolTip/QuestionToolTip.vue'
  export default {
    name: 'datetime',
    props: {
      query: {},
      isOther: {type: Boolean, default: false}, // 周报为自定义时间 TimeType类型为other时 EndTime 天数需要减一
      type: '', // 传值other other_half_hour
      initShow: {type: String, default: 'day'},
      isTimePeriod: {type: Boolean, default: false},
      isShowCon: {type: Boolean, default: true},
      otherShow: {type: Boolean, default: true}
    },
    data () {
      return {
        isShowFlag: false,
        title: [this.$t('report.foldedContition'), this.$t('report.unfoldedContition')],
        openTime: '',
        week: this.currentWeek,
        boolean: false,
        optionsCurrent: '',
        pickerOptions1: this.beginAllDate(),
        pickerOptions: this.beginDate(),
        reportType: [
          {label: this.$t('report.year'), value: 'year', name: 'year_report'},
          {label: this.$t('report.month'), value: 'month', name: 'month_report'},
          {label: this.$t('report.week'), value: 'week', name: 'week_report'},
          {label: this.$t('report.day'), value: 'day', name: 'day_report'},
          {label: this.$t('report.other'), value: this.type, name: 'other_report'}
        ],
        timeCheck: false,  //   定时间段统计
        options30: {
          start: '00:00',
          step: '00:30',
          end: '23:30'
        },
        options60: {
          start: '00:00',
          step: '01:00',
          end: '24:00'
        },
        formSource: {
          yearReport: '',
          monthReport: '',
          dayReport: ''
        },
        form: {
          timeType: '',
          yearReport: '',
          monthReport: '',
          dayReport: ''
        },
        timePeriodStart: '',  //   定时间段统计  开始
        timePeriodEnd: '',
        otherTimes: {beginTime: '', endTime: '', beginDate: '', endDate: ''}
      }
    },
    computed: {
    },
    watch: {
      form: {
        deep: true,
        handler: function (newV) {
          // debugger
          if (newV.timeType === 'week') {
            // newV.timeType = 'day'
            this.changeWeek()
            return
          }
          if (newV.timeType !== 'other') {
            Object.assign(this.query, formatDateQuery(newV))
          } else {
            Object.assign(this.query, {timeType: this.form.timeType, StartTime: '', EndTime: ''})
          }
        }
      },
      otherTimes: {
        deep: true,
        handler: function (newV) {
          let start = getDateTime(newV.beginDate ? newV.beginDate : '', 'date')
          let end = getDateTime(newV.endDate ? newV.endDate : '', 'date')
          if (this.form.timeType === 'other_half_hour') {
            if (this.timeCheck === true) {
              start += (' ' + '00:00')
              end += (' ' + '23:30')
            } else {
              if (start) {
                if (newV.beginTime) {
                  start += ' ' + newV.beginTime
                }
              }
              if (end) {
                if (newV.endTime) {
                  end += ' ' + newV.endTime
                }
              }
            }
          }
          Object.assign(this.query, {timeType: this.form.timeType, StartTime: start, EndTime: end})
        }
      },
      timePeriodStart: {
        deep: true,
        handler: function (newV) {
          Object.assign(this.query, {timePeriodStart: newV})
        }
      },
      timePeriodEnd: {
        deep: true,
        handler: function (newV) {
          Object.assign(this.query, {timePeriodEnd: newV})
          if (this.query.timePeriodEnd === '24:00') {
            this.query.timePeriodEnd = '23:59'
          }
        }
      },
      timeCheck: {
        deep: true,
        handler: function (newV) {
          Object.assign(this.query, {timePeriod: newV})
          if (this.form.timeType === 'other_half_hour') {
            this.otherTimes.beginTime = '00:00'
            this.otherTimes.endTime = '23:30'
          }
        }
      },
    },
    methods: {
      changeDate (date) {
        this.form.yearReport = date.getFullYear()
        this.form.monthReport = date.getMonth() + 1
        this.form.dayReport = date.getDate()
      },
      spreadClickFun () { // 展开点击事件
        this.isShowFlag = false
        this.$emit('isFold', this.isShowFlag)
      },
      retractClickFun () { // 收起点击事件
        this.isShowFlag = true
        this.$emit('isFold', this.isShowFlag)
      },
      changeWeek () {
        var beginWeek = new Date(this.week.getTime() - 3600 * 1000 * 24)
        var endWeek = null
        if (this.isOther) {
          endWeek = new Date(this.week.getTime() + 3600 * 1000 * 24 * 5)
          Object.assign(this.query, {timeType: this.type, StartTime: getDateTime(beginWeek).split(' ')[0], EndTime: getDateTime(endWeek).split(' ')[0]})
        } else {
          endWeek = new Date(this.week.getTime() + 3600 * 1000 * 24 * 6)
          console.log(endWeek);
          Object.assign(this.query, {timeType: this.type, StartTime: getDateTime(beginWeek).split(' ')[0] + ' 00:00:00', EndTime: getDateTime(endWeek).split(' ')[0] + ' 00:00:00'})
        }
      },
      typeChange (index) {
        if (index !== this.type) {
          this.formSource.yearReport = new Date()
          this.formSource.monthReport = new Date()
          this.formSource.dayReport = new Date()
          this.form.yearReport = (new Date()).getFullYear()
          this.form.monthReport = (new Date()).getMonth() + 1
          this.form.dayReport = (new Date()).getDate()
        } else {
          this.otherTimes = {beginTime: '', endTime: '', beginDate: '', endDate: ''}
        }
        let date = new Date()
        this.week = new Date(date.getTime() - 3600 * 1000 * 24 * (date.getDay() - 1))
        // 向父级传递选择得时间类型
        this.$emit('changeType', index)
      },
      options () {
        if (this.type === 'other') {
          this.openTime = false
        }
        if (this.type === 'other_half_hour') {
          this.openTime = true
          return this.options30
        }
      },
      timePeriodChange () {
        this.timePeriodStart = ''
        this.timePeriodEnd = ''
      },
      beginDate() {
        let self = this
        return {
          // 年份disabled掉设置中之前的年份
          disabledDate(time) {
            if (self.$store.state.dateLimit) {
              let fixedTime = new Date(time)
              return fixedTime.getFullYear() < self.$store.state.dateLimit
            }
          }
        }
      },
      beginAllDate() {
        let self = this
        return {
          // 年份disabled掉设置中之前的年份
          disabledDate(time) {
            if (self.$store.state.dateLimit) {
              let fixedTime = new Date(time)
              return fixedTime.getFullYear() < self.$store.state.dateLimit || time.getTime() > Date.now()
            }
          },
           shortcuts: [{
            text: self.$t('customer.today'),
            onClick (picker) {
              picker.$emit('pick', new Date())
            }
          }, {
            text: self.$t('customer.yesterday'),
            onClick (picker) {
              const date = new Date()
              date.setTime(date.getTime() - 3600 * 1000 * 24)
              picker.$emit('pick', date)
            }
          }]
        }
      },
    },
    components: {
      questionToolTip
    },
    beforeMount () {
      if (!this.type) {
        this.reportType.pop()
        this.reportType.splice(2, 1)
      } else if (this.type === 'noDay') {
        this.reportType.splice(2)
      }
      if(!this.otherShow){
        this.reportType.pop()
      }
      this.form.timeType = this.initShow
      this.typeChange(this.initShow)
      this.optionsCurrent = this.options()
      let date = new Date()
      this.week = new Date(date.getTime() - 3600 * 1000 * 24 * (date.getDay() - 1))
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../assets/common.styl"
  .ui-unfold-span
    cursor pointer
    color #459ae9
    display inline-block
  .isShowFold
    line-height 26px
  .el-col-2
    margin-top 8px
    color $cf-gray1
    width 58px
  .el-date-editor.el-input
    width 100%
    margin-left 0
  .time_pic .el-date-editor.el-input.time
    width 140px
    margin-left: 10px
</style>
